<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>
  <div id="canvas-wrp">
    <canvas id="canvas" style=" border:1px solid #ccc ;display: block; margin: 100px auto;"></canvas>

  </div>
  <script>
    window.onload = function () {



      let color = '#31DCD7'
      let canvas = document.querySelector('#canvas')
      canvas.width = 800
      canvas.height = 600
      let cxt = canvas.getContext('2d')
      cxt.beginPath()
      cxt.rect(0, 0, 800, 600)
      cxt.fillStyle = '#18AD98'
      cxt.fill()
      cxt.beginPath()
      for (var i = 0; i <= 20; i++) {
        drawWhiteRect(cxt, 10 * i, 10 * i, 800 - 20 * i, 600 - 20 * i);
        drawBlackRect(cxt, 10 * i, 10 * i, 790 - 20 * i, 590 - 20 * i);
      }
      cxt.beginPath();
      cxt.rect(395, 295, 5, 5);
      cxt.fillStyle = "#31DCD7";
      cxt.lineWidth = 4;
      cxt.fill();
      cxt.stroke();
    }
    function drawBlackRect(cxt, x, y, width, height) {
      let color = '#31DCD7'
      cxt.beginPath()
      cxt.rect(x, y, width, height)
      cxt.lineWidth = 5
      cxt.strokeStyle = color
      cxt.stroke()
    }
    function drawWhiteRect(cxt, x, y, width, height) {
      let color = '#31DC34'
      cxt.beginPath()
      cxt.rect(x, y, width, height)
      cxt.lineWidth = 5
      cxt.strokeStyle = color
      cxt.stroke()
    }



  </script>
</body>

</html>